<template>
  <div class="dashboard-container">
    <div class="layout-wrapper">
      <!-- 左侧固定导航栏 -->
      <div class="sidebar-fixed">
        <div class="system-title">
          <h2>区块链电子病历管理系统</h2>
        </div>
        <div class="user-info">
          <!-- 添加圆形头像 -->
          <div class="user-avatar">
            <el-avatar :size="36" :src="avatarUrl">
              <span v-if="!avatarUrl">{{ avatarInitial }}</span>
            </el-avatar>
          </div>
          <div class="user-details">
            <span class="username">{{ userInfo.username || '未设置' }}</span>
            <el-tag :type="roleTagType" size="small">{{ roleLabel }}</el-tag>
          </div>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          router
        >
          <!-- 患者菜单 -->
          <template v-if="role === 'patient'">
            <el-menu-item index="/dashboard/patient">
              <el-icon><Odometer /></el-icon>
              <span>控制台概览</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/patient/profile">
              <el-icon><User /></el-icon>
              <span>个人信息</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/patient/records">
              <el-icon><Document /></el-icon>
              <span>我的病历</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/patient/appointments">
              <el-icon><AlarmClock /></el-icon>
              <span>预约记录</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/patient/account">
              <el-icon><Wallet /></el-icon>
              <span>区块链账户</span>
            </el-menu-item>
          </template>
          
          <!-- 医生菜单 -->
          <template v-else-if="role === 'doctor'">
            <el-menu-item index="/dashboard/doctor">
              <el-icon><Odometer /></el-icon>
              <span>控制台概览</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/doctor/profile">
              <el-icon><User /></el-icon>
              <span>个人信息</span>
            </el-menu-item>

            <el-menu-item index="/dashboard/doctor/patients">
              <el-icon><User /></el-icon>
              <span>患者管理</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/doctor/records">
              <el-icon><Document /></el-icon>
              <span>病历管理</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/doctor/schedule">
              <el-icon><Calendar /></el-icon>
              <span>值班排班</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/doctor/account">
              <el-icon><Wallet /></el-icon>
              <span>区块链账户</span>
            </el-menu-item>
          </template>
          
          <!-- 管理员菜单 -->
          <template v-else-if="role === 'admin'">
            <el-menu-item index="/dashboard/admin">
              <el-icon><Odometer /></el-icon>
              <span>控制台概览</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/admin/users">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/admin/hospitals">
              <el-icon><OfficeBuilding /></el-icon>
              <span>医院管理</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/admin/departments">
              <el-icon><Menu /></el-icon>
              <span>科室管理</span>
            </el-menu-item>
            
            <el-menu-item index="/dashboard/admin/blockchain">
              <el-icon><Connection /></el-icon>
              <span>区块链管理</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      
      <!-- 右侧可滚动内容区域 -->
      <div class="content-scrollable">
        <div class="header">
          <div class="blockchain-account">
            <el-icon><Wallet /></el-icon>
            <span>区块链账户: {{ blockchainAccount }}</span>
          </div>
          <el-button type="text" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出登录</span>
          </el-button>
        </div>
        
        <div class="main-content">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/store'
import { 
  Odometer, User, Document, OfficeBuilding, 
  Menu, Connection, Calendar, Wallet, AlarmClock, SwitchButton 
} from '@element-plus/icons-vue'

const authStore = useAuthStore()
const route = useRoute()
const router = useRouter()

const role = computed(() => authStore.userRole)
const userInfo = computed(() => authStore.userInfo || {})
const blockchainAccount = computed(() => authStore.blockchainAccount || '未设置')
const activeMenu = computed(() => route.path)

// 头像URL - 根据用户信息生成
const avatarUrl = computed(() => {
  // 实际应用中可以从用户信息中获取头像URL
  return userInfo.value.avatar || ''
})

// 头像首字母 - 用于没有头像时显示
const avatarInitial = computed(() => {
  if (userInfo.value.username) {
    return userInfo.value.username.charAt(0).toUpperCase()
  }
  return 'U'
})

const roleLabel = computed(() => {
  switch (role.value) {
    case 'patient': return '患者'
    case 'doctor': return '医生'
    case 'admin': return '管理员'
    default: return '未知角色'
  }
})

const roleTagType = computed(() => {
  switch (role.value) {
    case 'patient': return 'info'
    case 'doctor': return 'success'
    case 'admin': return 'warning'
    default: return ''
  }
})

const logout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.dashboard-container {
  height: 100vh;
  overflow: hidden;
}

.layout-wrapper {
  display: flex;
  height: 100vh;
}

/* 左侧固定导航栏样式 */
.sidebar-fixed {
  width: 220px;
  background-color: #304156;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.system-title {
  padding: 20px 15px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.system-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.user-info {
  padding: 15px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.username {
  font-weight: 500;
  font-size: 14px;
}

.user-info .el-tag {
  width: fit-content;
  font-size: 12px;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  border-right: none;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  margin: 5px 0;
  font-size: 14px;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #1f2d3d !important;
  color: #409EFF !important;
  border-left: 4px solid #409EFF;
}

.sidebar-menu .el-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.sidebar-menu .el-menu-item .el-icon {
  font-size: 18px;
  margin-right: 8px;
}

/* 右侧可滚动内容区域 */
.content-scrollable {
  flex: 1;
  margin-left: 220px; /* 等于侧边栏宽度 */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  z-index: 99;
}

.blockchain-account {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.logout-btn {
  padding: 8px 15px;
  border-radius: 4px;
  color: #f56c6c;
}

.logout-btn:hover {
  background-color: rgba(245, 108, 108, 0.1);
}

/* 主内容区可滚动 */
.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}

/* 头像样式增强 */
.el-avatar {
  background-color: #707a85;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>